<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>预约</title>
    <link rel="stylesheet" href="css/fore/order.css">
    <link rel="stylesheet" href="css/fore/index.css">
    <script src="js/jquery/2.0.0/jquery.min.js"></script>
    <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/fetch.min.js"></script>
    <script src="js/axios.min.js"></script>

</head>
<body>
<div class="header">
    <div class="top">
        <div class="top-logo fl">
            <a id="logo" href="index.html"><img src="img/car-logo.png" alt="" class="fl" style="margin-top: 20px;width: 45px"><span class="top-logo-text">练车预约系统</span></a>
        </div>
    </div>
    <div class="header-nav">
        <ul id="nav-list">
            <li class="nav-list-li"><a href="index.html">首页</a></li>
            <li class="nav-list-li"><a href="selectcoach.html">明星教练</a></li>
            <li class="nav-list-li"><a href="testorder.html">考试报名</a></li>
            <li class="nav-list-li"><a href="order.html">练车预约</a></li>
            <li class="nav-list-li"><a href="teachingvideo.html">驾考视频</a></li>
            <li class="nav-list-li"><a href="register.html">驾校报名</a></li>
        </ul>
    </div>
</div>

<div class="headlineC" id="allContent">
    <div class="headline">
        <div class="icon fl"><img src="img/headline_icon.png" ></div>
        <h2 class="headline-title fl">{{user.student.schedule}}预约安排</h2>
        <div class="links fr">
            <a @click="recover" href="#nowhere" class="goBack fl" style="" bosszone="SC_cBack">回到今天</a>
            <a href="javascript:;" class="calendar" bosszone="SC_cCalendar">
                <img src="img/calendar.png" alt="" width="30" style="margin-top: -4px">
                <input type="date" class="links-date" v-model.date="date">
            </a>
        </div>
        <div class="page">
            <a @click="forward" href="#nowhere" class="forward" bosszone="SC_cB7">&lt;&nbsp;前七天</a>
            <span class="date">{{currentStr}}</span>
            <a @click="backward" href="#nowhere" class="backward" bosszone="SC_cA7">后七天&nbsp;&gt;</a>
        </div>
    </div>
    <div class="stream">
    <div class="item" v-for="sc, ii in scs" :style="{'margin-bottom': ii == 6 ? height1 : height2}">
        <div class="date1 today" :style="{'background-color': sc.date == today ? color2 : color3}">
            {{sc.date == today ? "今天" : sc.week}}
        </div>


        <table :id="['tab' + ii]" class="list-time listPage table table-striped table-bordered table-hover">
            <thead>
            <tr class="success">
                <th>时间段</th>
                <th>预约人数</th>
                <th>预约</th>
                <th>取消预约</th>
                <th>教练状态</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="p, index in periods" :style="{'background-color': sc.reservation[index] ? sc.time[index] >=0 ? color1 : color4 : sc.time[index] >=0 ? color3 : color4}">
                <td>{{p.i}}</td>
                <td :id="['td' + index]">{{sc.time[index] >=0 ? sc.time[index] : 0}}</td>

                <td v-if="sc.reservation[index]"><a @click="reservation($event,ii,index,sc.time[index],1)">
                    预约成功
                </a></td>
                <td v-else><a class="glyphicon glyphicon-pencil"
                       @click="reservation($event,ii,index,sc.time[index],1)"></a></td>
                <td><a class="glyphicon glyphicon-remove"
                       @click="reservation($event,ii,index,sc.time[index],-1)"></a></td>
                <td v-if="sc.time[index] >= 0">正常工作</td>
                <td v-else>不在场地</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
</div>
<br/>
<br/>
<div class="footer">
    <p>
        Good CarTeacher©2018 | QQ:123456789
        <a href="#">|关于我们</a>
        <a href="login.html">|驾校登录</a>
    </p>
</div>

<script>
    var url = "admin_coach_test";

    new Vue({
        el: '#allContent',
        data: {
            trStyle: "background-color: #3c763d",
            color1: "#5e5e5e",
            color2: "#F23D63",
            color3: "",
            color4: "#d43f3a",
            height1: "65px",
            height2: "",
            scs: [],
            today: "",
            currentStr: "",    //中间的日期字符串
            current: "",       //当前页面第一天的日期
            t: "",             //请求参数
            user:[],           // 用户信息
            baseUrl: "admin_coach_test",
            periods:[{i:"8:00~9:00"},
                {i:"9:00~10:00"},
                {i:"10:00~11:00"},
                {i:"11:00~12:00"},
                {i:"13:00~14:00"},
                {i:"14:00~15:00"},
                {i:"15:00~16:00"},
                {i:"16:00~17:00"}
            ],
            //日期控件的日期
            date: []
        },
        mounted: function () {
            var self = this;
            url = this.baseUrl;
            console.log("this1------------------> " + this);
            fetch(url).then(function (response) {
                response.json().then(function (jsonObject) {
                    console.log(jsonObject);
                    if(jsonObject.flag == -1){
                        alert("只有科目二和科目三才能预约！！！");
                        window.location ="index.html"
                    }
                    else if(jsonObject.flag == -11){
                        alert("只能查看近一个月左右的预约情况 !!!");
                        return;
                    }
                    var date = new Date();
                    date.setHours(0);
                    date.setMinutes(0);
                    date.setSeconds(0);
                    date.setMilliseconds(0);
                    self.today = date.getTime();
                    console.log(self.today);
                    self.scs = jsonObject.scs; //数组
                    self.currentStr = jsonObject.currentStr;
                    self.user = jsonObject.user;
                    self.current = jsonObject.currentDate;
                    console.log(self.user);
                    console.log("this2--------> " + self)
                }).catch(function (err) {
                    console.log("Fetch错误：" + err);
                })
            });
        },
        methods:{
            forward: function(){
                var d = this.stringToDate();
                d.setDate(d.getDate()-7);
                this.t=d.getTime();
                this.request(d);
            },
            backward: function(){
                var d = this.stringToDate();
                d.setDate(d.getDate()+7);
                this.t=d.getTime();
                this.request(d);
            },
            recover: function () {
                var d = new Date();
                d.setHours(0);
                d.setMinutes(0);
                d.setSeconds(0);
                d.setMilliseconds(0);
                this.t=d.getTime();
                this.request(d);
            },
            reservation: function(e,i,j,num,flag){   //第i天的第j 列

                self  = this;
                // console.log(e.target);
                if(this.scs[i].time[j] == -1){
                    alert("教练不在场地无法预约！");
                    return ;
                }
                var d = this.stringToDate();
                d.setDate(d.getDate()+i);
                num+=flag;
                console.log("----------->"  + num);
                url = "fore_student_reservation?j=" + j + "&t=" + d.getTime() + "&num=" + num + "&flag=" + flag;
                console.log(url);
                axios.get(url).then(function (response) {
                    var success = response.data.success;
                    if(success == 1 || success ==-1){
                        // $("#tab"+i +" #td" + j)[0].innerText=num;
                        //只有用set 才能使数据更新
                        self.$set(self.scs[i].reservation,j,!self.scs[i].reservation[j]);
                        self.$set(self.scs[i].time,j,num);
                        console.log("reservation------>" + self.scs[i].reservation[j]);
                    }
                    else {
                        switch (success) {
                            case -11: alert("您还没有预约无法取消预约"); break;
                            case 11: alert("您已预约"); break;
                            case 33: alert("每天最多只能练4个小时哦"); break;
                            case 99: alert("只能提前两小时预约"); break;
                            case -99: alert("只能提前两小时取消预约"); break;
                            case -111: alert("只能预约最近一个月的"); break;
                        }
                    }
                });
            },
            request: function(d){
                var self = this;
                url = this.baseUrl + "?t=" + d.getTime();
                console.log(url);
                axios.get(url).then(function (response) {
                    if(response.data.flag == -11){
                        alert("只能查看近一个月左右的预约情况 !!!");
                        return;
                    }
                    self.scs = response.data.scs; //数组
                    self.currentStr = response.data.currentStr;
                    self.current = response.data.currentDate;
                    console.log("self.current " + self.current);
                })
            },
            stringToDate: function(){       //将字符串2018-10-22转换为date
                var arr = this.current.split('-');
                var year = parseInt(arr[0]);
                var month = parseInt(arr[1])-1;
                var date = parseInt(arr[2]);
                var tempD =  new Date();
                tempD.setFullYear(year);
                tempD.setDate(1);                // 10/31坑了我两个小时 当 date  是  31 时 设置月份为小月  月份会自动增加 在设置date 月份就会出错
                tempD.setMonth(month);
                tempD.setDate(date);
                tempD.setHours(0);
                tempD.setMinutes(0);
                tempD.setSeconds(0);
                tempD.setMilliseconds(0);
                return tempD;
            }
        },
        watch: {
            date: function (val) {
                this.current = val;
                var d = this.stringToDate();
                this.request(d);
            }
        }
    });
</script>
</body>
</html>